<template>
	<!-- 消息 -->
	<view class="chat-bg"></view>
	<view class="chat-box">
		<view class="chat-content">
			<scroll-view scroll-y="true" :scroll-into-view="chatData.toBottom" class="scroll-Y" style="height: 92vh;" @scroll="showScroll">
				<view class="chat-info" :class="item.sendUser === 0 ? 'chat-self' : 'chat-chatter'" v-for="(item, index) in chatList.list" :key="index">
					<!-- 头像 -->
					<image
						:src="item.sendUser === 0 ? store.state.headimgurl :  chatData.chatUserImg"
						mode="aspectFill"
						style="height: 80rpx; width: 80rpx; border-radius: 50%; margin-right: 15rpx; margin-bottom: auto;"
					></image>
					<!-- 消息 -->
					<view class="chat-message">
						<text class="text-main-xll">{{ item.sendMessage }}</text>
					</view>
				</view>
				<view id="to-buttom" style="height: 12rpx;"></view>
			</scroll-view>
		</view>
		<!-- 输入框 -->
		<view class="chat-send">
			<!-- 内容输入 -->
			<view class="send-content"><input class="uni-input" v-model="chatData.sendInfo" /></view>
			<view class="send-button" @click="sendMessage(chatData.sendInfo)"><text>发送</text></view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { InitChatInfo } from '../../type/chat';
import store from '../../store';
import { USER_IMG_URL } from '../../constant/systemConstant';
import  { reconnect } from '../../api/webSocket';
import { getTime } from '../../utils/dateTime';
//chatter 接收者 chatSelf 自己 发送者
const chatData = reactive({
	//接收者信息
	sendInfo:'',
	chatUserImg: '',
	chatUserId: '',
  //触底参数
	toBottom: '',
    //消息条数
	chatListNum:0
});
//聊天内容列表
const chatList = reactive({
 list: new Array<InitChatInfo>()
})
onLoad(option => {
	console.log(option);
	console.log('加载' + option.chatterId);
	//获取本地保存聊天记录
	var list: Array<InitChatInfo> = uni.getStorageSync(option.chatterId);
	chatData.chatListNum=list.length;
	if (list) {
		chatList.list = [
			// ... 是扩展运算符， 将list中的变量或者方法 提取出来并展开
			...list
		];
	}
	//赋值聊天标题
	uni.setNavigationBarTitle({
		title: option.chatterName 
	});
	chatData.chatUserImg = option.chatterImg !== '' ? option.chatterImg : USER_IMG_URL;
	chatData.chatUserId = option.chatterId;
	onMessage();
	toBottom();
});
onUnload(() => {
	uni.setStorageSync('unRead' + chatData.chatUserId, 0);
	if(chatData.chatListNum!==chatList.list.length){
	  uni.setStorageSync(chatData.chatUserId, chatList.list);
	  uni.setStorageSync('sendTime'+chatData.chatUserId, getTime());	
	}
});
const showScroll=()=>{
	//清理定位坐标 目的 让返回按钮可反复使用
	chatData.toBottom='';
}
//聊天一直处于底部
const toBottom = () => {
	chatData.toBottom = 'to-buttom';
};
const sendMessage = (sendMessage: string) => {
	if (sendMessage !== '') {
		//todo message处理成json字符串
		let message = { to: chatData.chatUserId, text: sendMessage };
		// let message = {to:'9527', text: sendMessage};
		
		uni.sendSocketMessage({
			data: JSON.stringify(message),
			success: () => {
				var chatSelf = new InitChatInfo();
				chatSelf.sendUser = 0;
				chatSelf.sendMessage = sendMessage;
				chatList.list.push(chatSelf);
				chatData.sendInfo = '';
				toBottom();
			},
			fail: () => {
				uni.showToast({
					title: '通信开了会差┭┮﹏┭┮ 重新连接中',
					icon: 'none'
				});
				reconnect();
			}
		});
	}
};
//接收消息 目的:快速渲染消息列表
const onMessage = () => {
	uni.onSocketMessage((res: any) => {
		if('HeartBeat'===res.data){
			return;
		}
		let data = JSON.parse(res.data);
		console.log(data);
		if(data.from===chatData.chatUserId){
		  var chatUser = new InitChatInfo();
		  chatUser.sendUser = 1;
		  chatUser.sendMessage = data.text;
		  chatList.list.push(chatUser);
		  toBottom();	
		}
	});
};
</script>

<style lang="scss">
.chat-bg {
	height: 100vh;
	width: 100vw;
	background-color: #f2f2f2;
	background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
	background-size: cover;
	box-sizing: border-box;
	position: fixed;
	z-index: 0;
}
.chat-box {
	.chat-content {
		.chat-info {
			display: flex;
			align-items: center;
			margin-bottom: 12rpx;
			.chat-message {
				max-width: 70%;
				padding: 15rpx;
				font-weight: bold;
				border-radius: 15rpx;
				box-shadow: rgba(60, 64, 67, 0.3) 0rpx 1rpx 2rpx 0rpx, rgba(60, 64, 67, 0.15) 0rpx 1rpx 3rpx 1rpx;
			}
		}
		.chat-chatter {
			.chat-message {
				background-image: linear-gradient(-225deg, #fffeff 0%, #d7fffe 100%);
			}
		}
		.chat-self {
			flex-direction: row-reverse;
			margin-left: auto;
			.chat-message {
				background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
			}
		}
	}
	.chat-send {
		padding-left: 5rpx;
		position: fixed;
		bottom: 0;
		height: 120rpx;
		width: 100%;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
		padding-top: 15rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		box-shadow: rgba(0, 0, 0, 0.05) 0rpx 0rpx 0rpx 1rpx, rgb(209, 213, 219) 0rpx 0rpx 0rpx 1rpx inset;
		background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
		.send-content {
			display: flex;
			align-items: center;
			width: 80vw;
			height: 5vh;
			margin-right: 4vw;
			border-radius: 15rpx;
			box-shadow: rgba(0, 0, 0, 0.05) 0rpx 6rpx 24rpx 0rpx, rgba(0, 0, 0, 0.08) 0rpx 0rpx 0rpx 1rpx;
			.uni-input {
				border-radius: 15rpx;
				padding-left: 15rpx;
				padding-right: 15rpx;
				height: 100%;
				width: 100%;
				background-color: #ffffff;
			}
		}
		.send-button {
			font-size: 40rpx;
			font-weight: bold;
			line-height: 5vh;
			color: #94bcff;
		}
	}
}
</style>
